<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title ?></title>
<link href="<?php echo base_url(); ?>assets/css/styles.css"  type="text/css" rel="stylesheet" />
<link href="<?php echo base_url(); ?>assets/css/slide.css"  type="text/css" rel="stylesheet" />
<!--<script src="<?php echo base_url(); ?>assets/jquery/jquery-1.3.2.js" type="text/javascript"></script>-->
<script  type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.tool.js"></script>
<script  type="text/javascript" >
	$(function() {
			$('label#rem').click(function() 
				{
						//alert($('#remember').checked());
						if($('#rem').hasClass('checked'))
						{
							$('#rem').removeClass("checked");
						}
						else
						{
							$('#rem').addClass("checked");
							}
				});
			

			$('a>img').click(function() 
				{
					var src=$(this).attr('src');
					//alert(src);
					var expsrc = src.split('/');
					var filename = expsrc[2];
					//img_big
					$("img.img_big").attr("src", '<?php echo base_url(); ?>assets/images/'+filename);
					
					$("img.img_text").attr("src", '<?php echo base_url(); ?>assets/images/text_'+filename);
					
					
				});		
                
/////////////////////slide show/////////////////////////
  var root=$("#chained").scrollable();

    $(".scrollable .items a").hover(function() {

	$(this).css({'z-index' : '99'}); /*Add a higher z-index value so this image stays on top*/ 
	$(this).find('img').addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
		.animate({
			marginTop: '-10px', /* The next 4 lines will vertically align this image */ 
			marginLeft: '-10px',
        
			top: '10%',
			left: '10%',
			width: '70px', /* Set new width */
			height: '70px', /* Set new height */
		
		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */

	} , function() {
	  // api.play();
	$(this).css({'z-index' : '0'}); /* Set z-index back to 0 */
	$(this).find('img').removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
		.animate({
			marginTop: '0', /* Set alignment back to default */
			marginLeft: '0',         
			top: '0',
			left: '0',
			width: '45px', /* Set width back to default */
			height: '45px', /* Set height back to default */
		
            margin: '5px',
            zIndex: '0'
		}, 400);
});
    
///////////////end slideshow///////////////////////     
                
		$('.user').click( function () {
			   if ($('.user').val()==' username') 
				 $('.user').val('');
			});

			
			$('.user').blur( function () {
				if ($('.user').val()=='')
				$('.user').val(' username');
			});	
			
			$('.pass').click( function () {
			   if ($('.pass').val()==' password') 
				 $('.pass').val('');
			});

			
			$('.pass').blur( function () {
				if ($('.pass').val()=='')
				$('.pass').val(' password');
			});	        
			
		  var div= $('#wappage');
		  div.css("margin-top", ($(window).height() - div.height())/2  + 'px');
});

</script>
</head>
<body>
<div id="wappage">
  <div id="wappage2">
    <div id="content">
      <div class="right">
       	<!-- right menu--><?php require 'right.php'; ?>
      </div>
      <div class="left">
		<!-- main content--> <?php require_once ($content.".php");?>
      </div>
    </div>
  </div>
</div>
</body>
</html>
